<template>
  <view class="container" v-if="showTips">
    <!-- <view class="content">
			<view class="content-search d-rn d-ac">
				<image src="../../static/img/search.png" mode=""></image>
				<input type="text" placeholder="请输入搜索关键词" placeholder-style="#CCCCCC">
			</view>
		</view> -->
    <!-- <view class="orign d-rn d-ac d-jb" @click="handleGoOrign">
			<view class="orign-left d-rn d-ac">
				<image src="../../static/logo.png" mode=""></image>
				<text>组织架构</text>
			</view>
			<view class="orign-right">
				<image src="../../static/img/right.png" mode=""></image>
			</view>
		</view> -->

    <view class="tong">
      <view
        class="list-cell d-rn d-ac"
        v-for="(cell, index) in newArray"
        @click="handleAddNumber(cell)"
		:key="index"
      >
        <view class="list-cell-left">
          <image
            :src="
              cell.iconSts
                ? '../../static/img/comfirm.png'
                : '../../static/img/notConfirm.png'
            "
            mode=""
          ></image>
        </view>
        <view class="list-cell-min">
          <image :src="baseUrl + cell.avatar" mode=""></image>
        </view>
        <view class="list-cell-right d-cw">
          <text>{{ cell.employeeName }}</text>
          <!-- <text>{{ cell.position }}</text> -->
        </view>
      </view>
      <div class="footer d-rn d-ac d-jc" @click="handleConfirm">
        <text class="d-rn d-ac d-jc">{{ $t('confirm') }}</text>
      </div>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      indexList: [],
      itemArr: [],
      baseUrl: request.common.baseUrl,
      newArray: [],
      title: "",
      needInfoList: [],
      showTips: false,
    };
  },
  onLoad() {},
  methods: {
    handleAddNumber(item) {
      item.iconSts = !item.iconSts;
      this.$forceUpdate();
    },
    handleGoOrign() {
      this.newArray.forEach((item) => {
        item.iconSts = false;
      });
      this.$commonFun.goUrl(1, "../organizationalStructure/index");
    },
    handleConfirm() {
      this.needInfoList = [];
      this.newArray.forEach((item) => {
        item.showDel = false;
        if (item.iconSts) {
          this.needInfoList.push(item);
        }
      });
      this.showTips = false;
      console.log("🐛 ~ handleConfirm ~ this.needInfoList:", this.needInfoList)

      this.$emit("handleSuccess", this.needInfoList);
    },
    handleOpen(e) {
      this.showTips = true;
      this.newArray = e;
      this.newArray.forEach((item) => {
        item.iconSts = false;
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 0%;
  background: rgba(0, 0, 0, 0.4);

  .content {
    width: 100%;

    &-search {
      width: 94%;
      padding: 20rpx 35rpx;
      box-sizing: border-box;
      margin: 26rpx auto;
      border-radius: 2em;
      background-color: #ffffff;

      image {
        width: 32rpx;
        height: 32rpx;
      }

      input {
        font-size: 26rpx;
        color: #cccccc;
      }
    }
  }

  .orign {
    width: 100%;
    padding: 24rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    &-left {
      image {
        width: 40rpx;
        height: 40rpx;
      }

      text {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        margin-left: 20rpx;
      }
    }

    &-right {
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .tong {
    width: 100%;
    background-color: #ffffff;
    margin-top: 100rpx;
    padding: 40rpx 0;
    box-sizing: border-box;
    .footer {
      width: 100%;
      margin-top: 60rpx;
      text {
        width: 90%;
        height: 80rpx;
        background-color: rgb(255, 208, 61);
        border-radius: 2em;
      }
    }
    .list-cell {
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #eeeeee;
      &-left {
        image {
          width: 32rpx;
          height: 32rpx;
        }
      }
      &-min {
        margin: 0 30rpx;
        image {
          width: 90rpx;
          height: 90rpx;
        }
      }
      &-right {
        text:nth-of-type(1) {
          font-size: 28rpx;
          color: #333333;
          font-weight: bold;
        }
        text:nth-of-type(2) {
          font-size: 28rpx;
          color: #666666;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
